<template xmlns="http://www.w3.org/1999/html">
    <div class="sea-page-column">
        <div class="box">
            <blockquote>标准的实现</blockquote>

            <el-table :data="valid_list">
                <el-table-column property="date" label="日期" width="180"></el-table-column>

                <sea-col-link property="name" label="姓名" :click="onAction"></sea-col-link>

                <sea-col-switch property="isDisabled" label="是否可用"
                                :change="onAction"></sea-col-switch>

                <sea-col-input property="name" label="行内编辑"
                               :change="onAction"></sea-col-input>

                <sea-col-image property="image" label="图片"></sea-col-image>

                <el-table-column property="address" label="地址" show-overflow-tooltip></el-table-column>
            </el-table>
        </div>

        <div class="box">

            <blockquote>扩展实现</blockquote>

            <el-table :data="list">
                <sea-col-select property="select" label="行内选择"
                                :change="onAction" :options="options"></sea-col-select>

                <sea-col-checkbox-group property="selects" label="行内选择"
                                        :change="onAction" :options="options"></sea-col-checkbox-group>


                <sea-col-dictionary property="select" label="数据字典" width="180"
                                    :options="options"></sea-col-dictionary>

                <sea-col-rate property="star" label="星级" width="180" :change="onAction"></sea-col-rate>

            </el-table>
        </div>
    </div>
</template>

<script>

import TableValidator from "@/widget/data-table/table-validator";
import Layers from "@/lang/layers/index";

export default {
    components: {},
    data() {
        return {
            // 多选的数据
            selection: undefined,
            // 是否发生过多选
            multiple: false,
            // 多选按钮列表
            batch: [
                {label: '调整', value: '$change'}
                , {label: '删除', value: '$delete'}
            ],
            list: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                isDisabled: false,
                select: 1,
                selects: [1],
                star: 1
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄',
                isDisabled: true,
                select: 2,
                selects: [2],
                star: 2,
                image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                isDisabled: true,
                select: 3,
                selects: [3],
                star: 1,
                image: '/img/head_01.png'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄',
                isDisabled: true,
                select: 1,
                selects: [1],
                star: 3,
                image: '/img/head_02.png'
            }]
            ,
            valid_list: [],
            options: [
                {value: 1, label: '区域1', style: ''}
                , {value: 2, label: '区域2', style: ''}
                , {value: 3, label: '区域3', style: ''}
                , {value: 4, label: '区域4', style: ''}
            ]
            , rules: {
                name: [
                    {min: 3, max: 5, message: '字符串长度在3-5之间', trigger: 'blur'}
                ]
            }
        }
    },
    mounted() {
        TableValidator.wrapList(this.list, this.rules);
        this.valid_list = this.list;
    },
    methods: {
        /**
         * 事件分发
         *
         * @param evt   事件名称
         * @param row   行级数据，可以直接修改
         * @param arg   发生变动的数据信息
         */
        onAction: function (evt, row, arg) {
            console.log('row-data has changed: ' + arg);

            row[arg.field] = arg.value;
            if (arg.field === 'name') {
                TableValidator.validItem(row, this.rules, "name");
            }
        }
        /**
         * 多选操作按钮
         */
        , multipleClick: function () {
            let selection = this.$refs.tableObject.getSelection();
            if (Layers.isEmpty(selection)) {
                Layers.warn('请先选中操作的行！');
                return false;
            }
            this.selection = selection;
            this.multiple = true;
        }
    }
}
</script>
